<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse value="0">
          <Panel>
            常规配置
            <div slot="content">
              <Form :label-width="100">
                <Collapse value="0" accordion class="m-t-5px">
                  <Panel>
                    表盘配置
                    <div slot="content">
                      <FormItem label="水波数量">
                        <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.waterWaveNum"></InputNumber>
                      </FormItem>
                      <FormItem label="表盘颜色">
                        <PnColorPicker size="small" v-model="chartOption.backgroundStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="表盘大小">
                        <Input size="small" v-model="chartOption.series.radius"/>
                      </FormItem>
                      <FormItemPanel title="表盘形状">
                        <Select size="small" v-model="chartOption.series.shape" style="width: 130px;">
                          <Option value="circle">圆形</Option>
                          <Option value="diamond">三角形</Option>
                          <Option value="rect">矩形</Option>
                          <Option value="roundRect">圆角矩形</Option>
                          <Option value="pin">大头针型</Option>
                          <Option value="container">撑满容器</Option>
                        </Select>
                        <Button size="small" class="m-l-5px" @click="shapeTextareaVisible = !shapeTextareaVisible">自定义</Button>
                        <Input class="m-t-5px" v-show="shapeTextareaVisible" type="textarea" :rows="4" v-model="chartOption.series.shape"/>
                      </FormItemPanel>
                    </div>
                  </Panel>
                  <Panel>
                    水波颜色
                    <div slot="content">
                      <Alert show-icon :style="{paddingRight: '5px'}">
                        默认水波颜色为蓝色系，您可以通过增加色值来为水波自定义颜色
                      </Alert>
                      <Button class="float-right" size="small" type="primary" @click="addColor"><Icon type="md-add" /> 新增色值</Button>
                      <div class="clearfix"></div>
                      <div class="m-b-10px"></div>

                      <FormItem :label="'水波色值'+(index+1)" v-for="(color, index) in chartOption.color" :key="index">
                        <PnColorPicker size="small" v-model="chartOption.color[index]" alpha recommend/>
                        <a href="javascript:;" class="m-l-5px" style="color: #757575;" @click.stop="deleteColor(index)"><Icon type="md-trash" /></a>
                      </FormItem>
                    </div>
                  </Panel>
                  <Panel>
                    边框配置
                    <div slot="content">
                      <FormItemPanel title="内边框">
                        <FormItem label="边框宽度">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.backgroundStyle.borderWidth"></InputNumber>
                        </FormItem>
                        <FormItem label="边框颜色">
                          <PnColorPicker size="small" v-model="chartOption.backgroundStyle.borderColor" alpha recommend/>
                        </FormItem>
                      </FormItemPanel>
                      <FormItemPanel title="外边框">
                        <FormItem label="边框宽度">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.itemStyle.borderWidth"></InputNumber>
                        </FormItem>
                        <FormItem label="起始颜色">
                          <PnColorPicker size="small" v-model="chartOption.itemStyle.startColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="过渡颜色">
                          <PnColorPicker size="small" v-model="chartOption.itemStyle.centerColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="结束颜色">
                          <PnColorPicker size="small" v-model="chartOption.itemStyle.endColor" alpha recommend/>
                        </FormItem>
                        <FormItem label="阴影宽度">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.itemStyle.shadowBlur"></InputNumber>
                        </FormItem>
                        <FormItem label="阴影颜色">
                          <PnColorPicker size="small" v-model="chartOption.itemStyle.shadowColor" alpha recommend/>
                        </FormItem>
                      </FormItemPanel>
                    </div>
                  </Panel>
                  <Panel>
                    值标签
                    <div slot="content">
                      <FormItem label="后缀文本">
                        <Input size="small" v-model="chartOption.label.suffixText" placeholder=""/>
                      </FormItem>
                      <FormItem label="默认颜色">
                        <PnColorPicker size="small" v-model="chartOption.label.textStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="被覆盖后颜色">
                        <Tooltip content="当水波漫过值标签后的字体颜色" placement="left">
                          <PnColorPicker size="small" v-model="chartOption.label.textStyle.insideColor" alpha recommend/>
                        </Tooltip>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.label.textStyle.fontSize"></InputNumber>
                      </FormItem>
                    </div>
                  </Panel>
                </Collapse>

              </Form>
            </div>
          </Panel>
          <Panel v-if="chartOption.title">
            标题
            <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
            <div slot="content">
              <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
            </div>
          </Panel>
          <Panel>
            其他
            <div slot="content">
              <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
            </div>
          </Panel>
        </Collapse>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="WaterBallChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'WaterBallChartForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        shapeTextareaVisible: false
      }
    },
    mounted() {
    },
    methods: {
      addColor () {
        this.chartOption.color.push('')
      },
      deleteColor (index) {
        this.chartOption.color.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
